<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>印章申请</title>
    <link rel="stylesheet" href="/asset/layui/css/layui.css">
    <link rel="stylesheet" href="/asset/css/index.css">
    <link rel="Shortcut Icon" href="cachet.ico">
    <script type="text/javascript" src="/asset/js/jquery-3.3.1.min.js"></script>
	<script src="/asset/layui/layui.js"></script>
    <script src="/asset/js/common.js"></script>
</head>
<body >
<div class="alert_bigbox">

	<form class="layui-form">
		  <input type="hidden" id="devicesId" name="devicesId" value="${devices.devicesId}">
		  	
          <div class="layui-form-item">
              <label for="devicesId" class="layui-form-label">申请类型</label>
              <div class="layui-input-block">
              	  <input type="radio" name="applyType" lay-filter="applyType" value="USED_APPLY" title="使用申请" checked="">
      			  <input type="radio" name="applyType" lay-filter="applyType" value="TAKE_APPLY" title="外带申请">
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="model" class="layui-form-label">印章名称</label>
              <div class="layui-input-inline">
                 ${devices.alias}
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="model" class="layui-form-label">
                  申请次数
              </label>
              <div class="layui-input-inline" style="width:100px">
              	  <input type="text" id="applyTimes" name="applyTimes" value="1" required="" lay-verify="alias" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">每次最多可申请5次</span>
              </div>
          </div>
          
          <div class="layui-form-item layui-hide" id="taketime">
              <label for="model" class="layui-form-label">
                  外带时间
              </label>
              <div class="layui-input-inline" style="width:100px">
              	   <input type="text" class="layui-input inputdate" id="takeStartTime" name="takeStartTime">
              </div>
              <div class="layui-form-mid"> - </div>
               <div class="layui-input-inline" style="width:100px">
              	   <input type="text" class="layui-input inputdate" id="takeEndTime" name="takeEndTime">
              </div>
             
          </div>
          
          <div class="layui-form-item">
              <label for="cause" class="layui-form-label">
                  申请事由
              </label>
              <div class="layui-input-inline" >
              	  <textarea placeholder="申请事由" class="layui-textarea" name="cause"></textarea>
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="model" class="layui-form-label">相关合同</label>
              <div class="layui-input-inline" style="width:600px">
              		<div class="layui-upload">
					  上传相关合同能增加审核效率
					  <div class="layui-upload-list">
					    <table class="layui-table">
					      <thead>
					          <tr>
						        <th>文件名</th>
						        <th>操作</th>
						      </tr>
					      </thead>
					      <tbody id="demoList"></tbody>
					    </table>
					  </div>
					  <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="testList">选择文件</button> 
					</div> 
              </div>
          </div>
          
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">提交申请</button>
          </div>
      </form>

</div>

    <script>
        layui.use(['form','layer','laydate','upload'], function(){
            $ = layui.jquery;
          var form = layui.form,layer = layui.layer,laydate = layui.laydate,upload = layui.upload;;
          
          
		   lay('.inputdate').each(function(){
			    laydate.render({
			      elem: this
			      ,trigger: 'click'
			    });
			  });
		  
		  form.on('radio(applyType)', function(data){
			  
			  if(data.value=='TAKE_APPLY'){
			  	 $("#taketime").removeClass("layui-hide");
			  }else{
			 	 $("#taketime").addClass("layui-hide");
			  }
		  });  
		  
	  		  
		  		  		  		  
		var demoListView = $('#demoList')  

		upload.render({
		  elem: '#testList'
		  ,url: '/upload/fileupload.htm?module=file'
		  ,accept:'file'
		  ,multiple: true
		  ,allDone: function(obj){ //当文件全部被提交后，才触发
		    console.log(obj.total); //得到总文件数
		    console.log(obj.successful); //请求成功的文件数
		    console.log(obj.aborted); //请求失败的文件数
		  }
		  ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
		  		console.log(res);
		  		if(res.code == 1){
		  			var data = res.data;
		  			
		  			
		  			var tr = $(['<tr id="upload-'+ index +'">'
			          ,'<td><input type="hidden" name="upfileIds" value="'+data.upfileId+'">'+ data.filename +'</td>'
			          ,'<td>'
			            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
			          ,'</td>'
			        ,'</tr>'].join(''));
			        
			         tr.find('.demo-delete').on('click', function(){
			          
			          	tr.remove();
			          
			          	return false;
			         });
			        
			        
			        demoListView.append(tr);
		  		
		  		}else{
		  		
		  			console.log("---error--");
		  		}
		  
		  }
		});      
		  
		  
		  

          //监听提交
          form.on('submit(add)', function(data){
            $.ajax({
      			type:"POST", 
      			url:"/apply/submit.htm",
      			data:data.field,
      			success:function(result) {
		      
		      		if(result.code=='1'){
		      			layer.alert("申请成功，等待审核", {icon: 6},function () {
			                // 获得frame索引
			                 window.parent.location.reload();
			                var index = parent.layer.getFrameIndex(window.name);
			                //关闭当前frame
			                parent.layer.close(index);
			            });
		      		}else{
		      		 	layer.msg(result.msg);
		      		}
		      
		    	 	} 
		    }); 
            
            return false;
          });
          
        });
    </script>

</body>
</html>